<template>
    <el-card class="boxEchart">
        <div class="boxHeader">
            <div class="boxLeft">数据总览</div>
            <div class="boxRight">
                <el-button type="primary" round plain @click="evaluationReport">评估报告</el-button>
            </div>

        </div>
        <el-dialog :visible.sync="dialogVisible" width="900px" @close="dialogVisible = false">
            <template>
                <div style="display: flex;">
                    <i style="padding: 4px; border-radius: 20px; background: #3B65FE;"></i>
                    <div style="margin: 0 20px;">评估报告</div>
                </div>
                <div class="left">
                    <div id="pdfDom">
                        <div class="proBox">
                            <!-- 文档内容 -->
                            <div class="titie">{{ form.name }}</div>
                            <i class="bg"></i>
                            <div class="titfw">{{ schoolInfo.name }}</div>
                            <!-- 文档下部分内容 -->
                            <div class="contentInfo">
                                <!-- 第一部分 -->
                                <div class="contentpdf">
                                    <div class="info_title">
                                        <div class="info_titleName">一、评价主要依据</div>
                                    </div>
                                    <div class="infopdf">
                                        <div class="pdf_list">(一) 教育教学指导思想评价</div>
                                        <div class="pdf_list">(二) 教育教学模式评价</div>
                                        <div class="pdf_list">(三) 教育教学内容评价</div>
                                        <div class="pdf_list">(四) 教育教学效果评价</div>
                                        <div class="pdf_list">(五) 存在的问题分析</div>
                                    </div>
                                </div>
                                <div class="contentpdf">
                                    <div class="info_title">
                                        <div class="info_titleName">二、评价结论</div>
                                    </div>
                                    <div class="infopdf">
                                        <div class="pdf_list">经公司多位劳动教育指导专家横向纵向深入分析比对，一致
                                            认为此教育教学数据真实有效，且教育教学效果显著。</div>
                                    </div>
                                </div>
                                <div class="contentpdf">
                                    <div class="info_title">
                                        <div class="info_titleName">三、附评估作证材料</div>
                                    </div>
                                    <div class="infopdf">
                                        <div class="pdf_list">详见《学校劳动教育学生成绩排名名单》</div>
                                    </div>
                                </div>
                                <div class="contentpdf">
                                    <div class="info_title">
                                        <div class="info_titleName">四、劳动统计数据</div>
                                    </div>
                                    <div class="infopdf">
                                        <div class="pdf_list">老师：共 <strong style="color: #2932BE;">{{ info.trCnt
                                        }}</strong>位、共批阅<strong style="color: #2932BE;">{{ info.pyCnt }}</strong>次
                                        </div>
                                        <div class="pdf_list">学生：共 <strong style="color: #2932BE;">{{ info.stuCnt
                                        }}</strong>位、共学习<strong style="color: #2932BE;">{{ info.learnedTime
}}</strong>、班级风采<strong style="color: #2932BE;">{{ info.ldfcCnt
}}</strong>次、实践打卡<strong style="color: #2932BE;">{{ info.uploadCnt
}}</strong>次</div>
                                    </div>
                                </div>

                                <!-- 第二部分 -->
                                <!-- 第三部分 -->
                                <!-- 第四部分 -->
                                <div class="foot">
                                    <div class="cont">
                                        <!-- <div class="tr"
                                            v-if="schoolInfo.officialSeal == '' || schoolInfo.officialSeal == null">
                                            北京永恒信业教育科技有限公司
                                            {{ schoolInfo.name }}
                                        </div> -->
                                        <!-- <div class="tr" v-else>
                                            {{ schoolInfo.officialSeal }}
                                        </div> -->
                                        <!-- <div class="tr">
                                            {{ schoolInfo.secondname == null ? ` 三协同劳动教育教学联盟校学术服务团队` : schoolInfo.secondname
                                            }}
                                        </div> -->
                                        <div class="tr" style="font-size: 18px;">
                                            五育通教育研究院
                                            <!-- {{info.date}} -->
                                        </div>
                                    </div>
                                </div>
                                <div class="img box box-tb">
                                    <img style="width: 100px;height: 100px;"
                                        src="../../../../static/image_index/chapter.png" alt="">
                                    <img src="../../../../static/image_index/wyt.png"
                                        style="width: 79px;height: 124px;margin-top: 50px;" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button>
            </template>
        </el-dialog>
        <el-row class="box box-pack-between boxFo">
            <el-col :span="3" class="info-list" v-for="(item, index) in list" :key="index">
                <el-col>
                    <div class="left-tip box box-align-center box-pack-center">
                        <el-image :src="`/static/image/info/icon_0${index + 1}.png`" style="width: 17px;height: 15px">
                        </el-image>
                        <span class="ml10">{{ item }}</span>
                    </div>
                </el-col>
                <el-col class="box box-pack-center box-align-end mt10 text" v-if="index == 0 && maxrole == `team`">
                    <h3 style="font-size: 28px;line-height: 20px;font-weight: 100;">{{ cntInfo.schoolCnt }}</h3><span
                        style="font-size: 10px;line-height: 10px;">所</span>
                </el-col>
                <el-col class="box box-pack-center box-align-end mt10 text" v-if="index == 0 && maxrole != `team`">
                    <h3 style="font-size: 28px;line-height: 20px;font-weight: 100;">{{ cntInfo.zyCnt }}</h3><span
                        style="font-size: 10px;line-height: 10px;">个</span>
                </el-col>
                <el-col class="box box-pack-center box-align-end mt10 text" v-if="index == 1">
                    <h3 style="font-size: 28px;line-height: 20px;font-weight: 100;">{{ cntInfo.bjCnt }}</h3><span
                        style="font-size: 10px;line-height: 10px;">个</span>
                </el-col>
                <el-col class="box box-pack-center box-align-end mt10 text" v-if="index == 2">
                    <h3 style="font-size: 28px;line-height: 20px;font-weight: 100;">{{ cntInfo.trCnt }}</h3><span
                        style="font-size: 10px;line-height: 10px;">人</span>
                </el-col>
                <el-col class="box box-pack-center box-align-end mt10 text" v-if="index == 3">
                    <h3 style="font-size: 28px;line-height: 20px;font-weight: 100;">{{ cntInfo.stuCnt }}</h3><span
                        style="font-size: 10px;line-height: 10px;">人</span>
                </el-col>
                <el-col class="box box-pack-center box-align-end mt10 text" v-if="index == 4">
                    <h3 style="font-size: 28px;line-height: 20px;font-weight: 100;">
                        {{ cntInfo.timeCnt != null ? cntInfo.timeCnt : 0 }}
                    </h3><span style="font-size: 10px;line-height: 10px;">小时</span>
                </el-col>
                <el-col class="box box-pack-center box-align-end mt10 text" v-if="index == 5">
                    <h3 style="font-size: 28px;line-height: 20px;font-weight: 100;">{{ cntInfo.signCnt }}</h3><span
                        style="font-size: 10px;line-height: 10px;">次</span>
                </el-col>
                <el-col class="box box-pack-center box-align-end mt10 text" v-if="index == 6">
                    <h3 style="font-size: 28px;line-height: 20px;font-weight: 100;">{{ cntInfo.resCnt }}</h3><span
                        style="font-size: 10px;line-height: 10px;">个</span>
                </el-col>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
export default {
    props: {
        cntInfo: {
            schoolCnt: {
                type: Number,
                default: 0
            },
            resCnt: {
                type: Number,
                default: 0
            },
            bjCnt: {
                type: Number,
                default: 0
            },
            signCnt: {
                type: Number,
                default: 0
            },
            stuCnt: {
                type: Number,
                default: 0
            },
            timeCnt: {
                type: Number,
                default: 0
            },
            trCnt: {
                type: Number,
                default: 0
            }
        }
    },
    data() {
        return {
            imgUrl: 'https://yhlyy.oss-cn-beijing.aliyuncs.com/1810DF96C0654594839B149634C4633E%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230516004551.png?Expires=4837769159&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=cNJP29vYI%2FGb3Fo3oNkkOxNNhHg%3D',
            htmlTitle: "评估报告",
            downType: true, // false为 pdf , true为图片
            dialogVisible: false,
            list: [],
            tabs: ['学校', '班级', '教师', '学生', '学习时长', '实践打卡', '教学资源'],
            tab: ['专业', '班级', '教师', '学生', '学习时长', '实践打卡', '教学资源'],
            loginRoleName: this.$store.state.loginInfo.roleName,
            maxrole: "",
            form: {
                name: '劳动教育评估报告',
                text: '在2020至2021学年度，开展的劳动教育课程及实践表现突出，被评为“劳动之星”。',
                bm: 'https://yhykt.oss-cn-beijing.aliyuncs.com/64A52C073A9D4D71A625E3C17A1DE0344870d8e0c8dc7464d40244f6c3e702b.png?Expires=4809579503&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=FBrMjsQ9ahQ4hnuWWa46%2BoSgRV4%3D',
                isShow: true,
                yzcont: '学院学工部',
                type: '1'
            },
            schoolId: this.$store.state.schoolId,
            schoolInfo: {
                name: '',
                officialSeal: '',
                officialSealUrl: ''
            },
            info: {
                stuCnt: 0,
                trCnt: 0,
                pyCnt: 0,
                learnedTime: 0,
                date: '',
                schoolName: '',
                uploadCnt: 0
            },
        }
    },
    mounted() {
        this.maxrole = this.$store.state.maxRole
        this.setBar()
        this.getXnXq()
    },
    methods: {
        // 评估报告
        evaluationReport() {
            this.dialogVisible = true
        },
        setBar() {
            console.log(this.maxrole);
            if (this.$store.state.maxRole != 'team') {
                this.list = this.tab
            } else {
                this.list = this.tabs
            }

        },
        getByIdData() {
            let url = '/yschool/getById'
            let params = {
                id: this.schoolId,
            };
            console.log(params);
            this.$ajax.post(url, params).then(res => {
                console.log(res);
                if (res.code == 0) {
                    this.schoolInfo = res.info
                }

            })
        },
        getXnXq() {
            let url = '/comm/getCurXnxq'
            this.$ajax.post(url).then(res => {
                console.log(res);
                if (res.code == 0) {
                    // this.xnxq = res.curxnxq
                    this.getByIdData()
                    this.getData(res.curxnxq.curxn, res.curxnxq.curxq)
                }

            })
        },
        getData(curxn, curxq) {
            let url = '/tongji/pgbg'
            let params = {
                schoolid: this.schoolId,
                xn: curxn,
                xq: curxq
            };
            this.$ajax.post(url, params).then(res => {
                console.log(res);
                if (res.code == 0) {
                    this.info = res.data
                }

            })
        },
    }

}
</script>

<style scoped lang="scss">
.boxEchart {
    display: flex;
    flex-direction: column;
    width: 100%;
    // background: #00BCC6;    
    background: #FFFFFF;
    border: 1px solid #E3E6F5;
    box-shadow: 0px 13px 24px 0px rgba(216, 221, 239, 0.1);
    border-radius: 18px;
}

.boxHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // margin: 20px 0;
    padding-bottom: 20px;
    box-sizing: border-box;
    // height: 197px;

    .boxLeft {
        width: 68px;
        height: 24px;
        border-radius: 0px;
        font-size: 17px;
        font-family: SiYuanHei, SiYuanHei-Bold;
        font-weight: 800;
        text-align: LEFT;
        color: #1f1f1f;

    }

    .boxRight {
        // width: 64px;
        height: 22px;
        border-radius: 0px;
        font-size: 16px;
        font-family: SiYuanHei, SiYuanHei-Normal;
        font-weight: normal;
        text-align: LEFT;
        color: #7A83FE;
        padding-bottom: 10px;
    }
}

#pdfDom {
    /* 要想pdf周边留白，要在这里设置 */
    padding: 20px;
    width: 750px;
    height: 1066px;
}

::v-deep .el-dialog__body {
    padding: 0px;
    display: flex;
    justify-content: center;
}

.proBox {
    // background: url("https://www.wytldy.com/file/web/bg.png") no-repeat;
    background: url('../../../../static/image_index/bg.png') no-repeat bottom;
    // background: url("https://yhykt.oss-cn-beijing.aliyuncs.com/96B3CAB46BBD4FA48E861776254786A4hbzs.png?Expires=4781038936&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=wLdsTBtAkljvkd2J4MEEHoKckOU%3D") no-repeat bottom;
    // background: url("https://yhykt.oss-cn-beijing.aliyuncs.com/A5D8925E3E6D45D294C5ED3056EE17AFsbzs.png?Expires=4781038927&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=zeLxf7D9%2BeG5tnsXLXsE9cbJ1Xo%3D") no-repeat bottom;
    background-size: cover;

    width: 100%;
    height: 100%;
    // width: 100%;
    // padding: 90px 94px;
    // box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    color: #000;
    font-family: SimSun;
    box-sizing: border-box;
    padding: 80px 40px;

    .titie {
        padding-top: 40px;
        font-weight: bold;
        font-size: 18px;
        color: #8C5A3E;
    }

    .bg {
        margin: 6px auto 10px;
        display: block;
        width: 60%;
        height: 15px;
        background: url(../../../../static/image_index/line.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .titfw {
        color: #8C5A3E;
        font-weight: bold;
        font-size: 16px;
    }

    .contentInfo {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    // 文档下内容
    .contentpdf {
        margin: 10px 0 0 0;

        .pdf_list {
            box-sizing: border-box;
            padding-right: 20px;
            text-align: left;
        }

        .info_title {
            .info_titleName {
                padding: 0 60px;
                font-size: 14px;
                font-weight: bold;
                color: #8C5A3E;
                text-align: left;
            }



            .info_titleNameTwo {
                color: #8c5a3e;
                margin-top: 5px;
                font-weight: bold;
                margin-left: -30px;
            }
        }

        .infopdf {
            margin-left: 90px;
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            justify-content: flex-start;
            align-items: flex-start
        }
    }

    // 第二部分
    .contentpdfTwo {
        margin: 10px 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: baseline;

        .info_title {

            .info_titleNameTwo {
                color: #8c5a3e;
                margin-top: 5px;
                font-weight: bold;
                // margin-left: 75px;
            }
        }

        .infopdfTwo {
            width: 80%;
            // background: red;
            margin-left: 70px;
            text-indent: 26px;
            text-align: justify;
        }

        .infopdf {}
    }

    // 第三部分
    .contentpdfThr {
        margin: 10px 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: baseline;

        .info_title {

            .info_titleNameThr {
                color: #8c5a3e;
                margin-top: 5px;
                font-weight: bold;
                // margin-left: 75px;
            }
        }

        .infopdfThr {
            // background: red;
            margin-left: 70px;
            text-indent: 26px;
            text-align: justify;

            .pdf_listThr {}
        }

        .infopdf {}
    }

    // 底部
    .foot {
        position: absolute;
        right: 18%;
        bottom: 123px;

        .cont {
            position: relative;
            font-size: 20rpx;
        }

        .tr {
            text-align: right;
        }

    }

    .img {
        position: absolute;
        top: 240px;
        right: 80px;
    }

    .cover_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -1;
    }
}

.boxFo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.info-list {
    padding: 0 10px;
    width: 167px;
    height: 80px;
    background: #FEFEFE;
    border: 1px solid #E3E6F5;
    box-shadow: 0px 13px 24px 0px rgba(216, 221, 239, 0.1);
    border-radius: 14px;


    &:nth-child(1) {
        .left-tip {
            background: #FFE3E8;
        }

        .text {
            color: #FF1F54;
        }

    }

    &:nth-child(2) {
        .left-tip {
            background: #EDDDFF;
        }

        .text {
            color: #7F3DF9;
        }
    }

    &:nth-child(3) {
        .left-tip {
            background: #D5FAFC;
        }

        .text {
            color: #00BCC6;
        }
    }

    &:nth-child(4) {
        .left-tip {
            background: #DEF2FF;
        }

        .text {
            color: #5087EC;
        }
    }

    &:nth-child(5) {
        .left-tip {
            background: #FFF0D9;
        }

        .text {
            color: #FF9600;
        }
    }

    &:nth-child(6) {
        .left-tip {
            background: #D9FFF3;
        }

        .text {
            color: #00C289;
        }
    }

    &:nth-child(7) {
        .left-tip {
            background: #FFDFEB;
        }

        .text {
            color: #FD4487;
        }
    }
}

.left-tip {
    margin-top: 10px;
    max-width: 87px;
    width: auto;
    height: 24px;
    border-radius: 8px;


}



.left-tip span {
    font-size: 12px;
}
</style>
